<template>
  <div class="container">
    <!--1视图-->
    <div id="chart" style="height: 500px;width: 500px">
    </div>

    <div id="main" style="height: 500px;width: 500px; margin-left: 20px">
    </div>

  </div>

</template>

<script>
import * as echarts from 'echarts';
import {countUser,countProduct} from "@/api/ewem/screen";
export default {
  name: "index",
  data() {
    return {
      ws: null,
      url:"ws://127.0.0.1:9202/websocket/",
      barChart: null,
      pieChart: null,
      userId: null
    }
  }, methods: {
    //3自定义方法
    init(){
      let obj = this.getUrlParams2(window.location.href)
      this.ws = new WebSocket(this.url+obj.userid)
      this.ws.onopen = this.websocketOnOpen;
      this.ws.onmessage = this.websocketOnMessage;
    },
    websocketOnOpen(){
      console.log("连接成功")
    },
    websocketOnMessage(datas){
      console.log(datas)
      if(datas.data !== "连接成功"){
        let res = JSON.parse(datas.data)
        if(res.type == 1){
          this.$message({
            type: "warning",
            message: res.msg
          })
        }else{
          /*this.onSubmit(JSON.parse(datas.data).server)
          this.bt(JSON.parse(datas.data).pie)*/
        }

      }
    },
    getUrlParams2(url){
      let urlStr = url.split('?')[1]
      const urlSearchParams = new URLSearchParams(urlStr)
      const result = Object.fromEntries(urlSearchParams.entries())
      return result
    },
    bt(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom,'dark');
      var option;

      countUser().then(res=>{

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: res.data
            }
          ]
        };

        option && myChart.setOption(option);

      })
    },
    onSubmit(){
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom, 'dark');
      var option;

     countProduct().then(res=>{


       console.log(res)

        option = {
          xAxis: {
            type: 'category',
            data: res.typeName
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: res.num,
              type: 'bar'
            }
          ]
        };

        option && myChart.setOption(option);

      })

    }
  }, created() {
    //4.钩子函数
  }, mounted() {
    this.onSubmit();
    this.bt();
    this.init();
  }
}
</script>

<style>
.container {
  display: flex;
}

#chart,
#main {
  height: 500px;
  width: 500px;
}
</style>
